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1. INTRODUCTION 

Ease of use and usefulness are core concepts in usability as it determines the acceptance, adoption 
and use of a technology [1-2]. The key to this is comprehensive user understanding that entails their mental 
model [3-4] on how they would operate a technology as well as their expectation on how the system would 
meet their functional needs. Human Computer Interaction is a domain in Computer Sciences that very much 
stresses on technology usability as it posits how a technology can be used effectively and efficiently by users 
in achieving specific goals in a specified context of use and ultimately users feeling satisfied when and after 
interacting with the technology [5-7]. 

There are various usability models available for reference that helps determine the attributes that an 
artefact should have for user to perceive the artefact as effective, efficient and satisfying to use. Some 
examples include Eason Model, Shackel’s Model, ISO09241-11, ISO/IEC 9126 and Nielsen’s Usability 
Heuristics (see [8-15]) with the latter being the most predominantly referred to for system interface design 
and system evaluation. 

With the continuing growth of web systems and mobile applications, users are presented with 
abundance of choices. Therefore, any artefact design must be tailored to meet user needs and their context of 
use in a designated environment [16] to ensure user acceptance. This could be done by incorporating 
usability evaluation activities into the development and evaluation stage [17-19]. One such example is school 
food purchasing system. 

A school food purchasing system generally involves information seeking, product categories, 
pricing and product selection processes. However, the stakeholders would involve parents, school canteen 
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operator as well as children. Therefore, effort must be undertaken to capture relevant user behavior as well as 
relate them to HCI principles. This is because the latter encapsulates not only design expectations that meet 
typical user behavior but also how design can be adopted to influence user adoption of a product and in turn 
affect the depth of interactivity with the product [20]. 

Many parents in Malaysia are obligated with work commitments from 8am to 5pm daily, which 
unfortunately limit their chances to prepare fresh cooked food for their school-going children. Malaysian 
children spend most of their time at school from 7:30am to 1:30pm, or 1:30pm to 6:30pm or 8:00am to 
3:30pm (the timing depends on term year as well as operational structure) and therefore rely on school 
canteen food for their brunch, lunch and tea-time. Children who do bring home-cooked food would be 
provided with lesser nutritional value if compared to freshly served food [21]. Parents whose children buy 
food from the canteen find themselves complaining over the quality and portion of the food to the food price 
[22-23]. Moreover, children simply buy food they find appealing with little regard on the nutritional value 
which is why they are always consuming processed food. Children therefore appear at the losing end as the 
lack of nutritional food can affect their social skills and reading development [24]. 

Findings from [25] suggests that both parents and canteen operator can play a role in children’s food 
choices in school. Parents would be able to participate in influencing their child’s healthy eating lifestyle by 
making informed decisions on food purchase. Canteen operators would then be compelled to provide healthy 
and nutritious food to the children as a delivery of services that is expected of parents. 

Providing parents with a tool to manage their child's diet via menu selection, nutritional intake 
monitoring and controlled budget is definitely an added value to everybody; (i) children would consume 
healthy food, (11) parents can be certain of proper food intake, (iii) canteen providers could manage their food 
preparation, and (iv) school would have healthy students ready for the daily lessons. 


1.1. Requirements Engineering 

Requirement engineering is the engineering discipline of establishing user requirements and 
specifying software systems [26]. It mainly involves the processes of gathering requirements from the users 
or stakeholders in accordance with their needs and demand towards the proposed system. Its key concept is 
“designing the right thing” rather than “designing the thing right” [27]. Requirements engineering is without 
a doubt a critical phase as it includes requirement management and planning, data collection from all the 
stakeholders, requirement analysis of data, requirement engineering documentation and modelling, validation 
and verification of the requirement [28]. 

A good requirement engineering exercise for a system development would assist in designing a 
quality user interface [29] that meets user needs. This is because, the process encapsulates understanding 
user’s mental model (i.e. how they perceive the use of system) as well as increasing the probability for 
system acceptance [30]. However, this needs to be done before system release to ensure any design issues 
could be addressed before hand [31]. This requires an iterative process as designing a good user interface is 
not a straightforward process [32]. 

As part of the requirements engineering process, we have interpreted user needs into a set of design 
which employs heuristic principles. Additionally, we have evaluated the end-product based on a Nielsen’s list 
of heuristic principles [12] which is considered standard within the domain of Human Computer Interaction. 
In a heuristic evaluation, usability experts will inspect the system’s interface and see how well it meets the 
heuristic principles. They are responsible in identifying potential usability issues and make recommendations 
on how to improve them [12]. 

In this paper, we intend to describe how we produced the Kantin Online System (English equivalent: 
Canteen Online System) which aims to allow parents to purchase their children’s school meal through 
advanced booking. We will describe the user requirement data gathering process, the prototype design as 
well as expert evaluation on the prototype design. 


2. METHODS 

Figure | illustrates the processes of requirement engineering applied by our study. The overall idea 
of the framework is to fulfil elicitation of user requirements from the relevant stakeholders, design and 
develop the system as well as to evaluate the final product based on heuristic principles. The framework 
attempts to employ the user-centred element which is core in developing a usable and useful system design 
[15] while remaining within a scientific procedure of fact collection and analysis. The description of the tasks 
can be found in the proceeding sections. 


Indonesian J Elec Eng & Comp Sci, Vol. 17, No. 1, January 2020 : 357 - 364 


Indonesian J Elec Eng & Comp Sci 


ISSN: 2502-4752 








Literature review from journals, articles, newspaper cuttings, 
conference proceeding and books related to the needs of Kantin 
Online. 

Preliminary studies and interviews conducted with parents. 
Identification of problem statement, research objectives, research 
questions, aim, scope and significance of the research. 


Primary Data collected from survey did with parents, canteen 
operators and school administrators. 
Method of survey : 
- Parents : Questionnaires 
- School Administrator : Interview 
~ Canteen Operator : Interview & Observation 
Sampling technique : 
- Parents : Non Probability ; Purposive Sampling 


Analysis of the requirements, functions and processes required in Kantin 
Online system. 
Method of analysis - 

~ Questionnaires : Descriptive Analysis. 

~- Interview & Observation : Descriptive and Interpretative Analysis. 


Results described the engineering requirement that required by 
Kantin Online. 

Modelling had been done by developing the prototype for Kantin 
Online. 

Validation had been done by Heuristic Evaluation on Kantin 
Online’s prototype features and functions. 


Elements, functions 
and processes that may 
be required by Kantin 
Online. 


Set of surveys as 
follows: 

* Questionnaires 
* Interviews 

* Observations 


The requirements 
required in designing 
and developing Kantin 
Online. 


* Prototype of 
Kantin Online. 

*  Results’comments 
from Heuristic 
Evaluation. 





Figure 1. Requirement Engineering Framework for Kantin Online System 


2.1. Data Gathering 

Our data gathering process took place at Sekolah Kebangsaan Seksyen 27(2), a primary school in 
the city of Shah Alam, Selangor, Malaysia. We targeted parents with primary school-going children within 
the urban area as we feel they are at the better position to purchase food in advance (via food booking 
system) due to the costing involved. Additionally, we wanted to have a better understanding of their 
underlying issues, their needs and wants in regard to food purchase and food intake of their children in 
school. A set of 30 questions via an online questionnaire were sent to 121 parents. The questionnaire 
contained four sections; (i) demographic details, (ii) current perception on school canteen, (iii) preferred 
features for Kantin Online and (iv) menu choices and preferred budget. 

We also interviewed school canteen operators to understand their business logic and strategy. As 
much as we wish to design a system that meets parents’ needs, the constraints of the service provider must 
also be considered. For example, the capability of the canteen to provide nutritious food within parents’ 
desired budget or the ability of the canteen to provide the food. This is important as the main intention of 
Kantin Online system is to provide healthy menu with enough quantity and affordable price for parents to 
purchase for their children. 


2.2. Data Analysis, Modeling and Validation 

Descriptive and interpretative analysis were done on the collected data as part of the requirement 
engineering for Kantin Online system. The requirements from both stakeholders were presented to them in 
sketched forms (lo-fidelity prototype) to confirm their system needs. Some refinements were made to the 
design which we then proceeded to middle fidelity prototyping using Bootstrap v3.3.6. software. The 
prototype was also used to validate the designed functionality. However, it must be acknowledged that the 
prototype was simply a middle-fidelity version hence not fully functional. 

Heuristic Evaluation [12] was employed for the prototype evaluation. It underlines ten principles in 
system which is summarized in Table 1. 
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3. RESULTS AND ANALYSIS 
3.1. User Requirement 

121 parents comprising 44 fathers, 70 mothers and 7 guardians responded to the survey. The 
respondents were aged between 25 to 50 years old with 30 to 39 years of age being the group majority. From 
all the respondents, 76% of them have children buying food from the school canteen daily. 

For the canteen menu, parents expect wide range of quality food choices as well as served in 
appropriate quantity suitable with children food intake as well as within affordable price range (a budget of 
RM60/month). However, at present, the service provided by the canteen did not meet their expectations as 
children are often served with unhealthy food such as nuggets, sausages and fries. Also, they found the food 
to be rather expensive and limited in option. Parents have expressed desire to be more in control on the food 
purchased and consumed by their children at school. The Ministry of Health Malaysia had stated that 
children aged 7 to 9 years old need to have 1800 kcal to 1600 kcal daily [21]. Not knowing the food 
consumed by their children at school would impede parents from discovering the calorie amount consumed 
by their children that day. This in turn may result in children getting more or less amount of the daily 
recommended calorie intake due to the food taken at home for the rest of the day. 

From the requirements gathering process, it was determined that features parents require for the 
Kantin Online system are variety of menu option, nutrition calculator, list of allergens in each menu, ability 
to purchase food in advance (food booking) as well as payment gateway. The key idea is to allow their 
children to eat different type of healthy and food daily which is safe while not breaking the bank. We then 
matched these requirements to the constraints of the canteen operator. The system design should allow 
canteen operators to measure the actual supply and demand for their operations as this would allow them to 
be cost effective as well as avoid wastage. Based on our interviews with them, we learned that they buy raw 
materials in advance based on what they plan to sell for the week. Food wastage typically happens on unsold 
food. Following this, they agree that the feature allowing food booking in advance would benefit them as 
they could better plan the purchase of raw materials as well as able to estimate the quantity of food to prepare 
which would help avoid food wastage. 


Table 1. Attributes of Usability Heuristics (Adapted from [12]) 








Principle Description 
Visibility of System Status System should always inform and alert users on current process via feedback within reasonable 
time 
Match between System and Real System should be in logical order and easy to understand, with words, phrases and concepts 
World familiar to the users 
User Control and Freedom Allow undo and redo of the system’s function as users are prone to slips and mistakes. Avoid 
unnecessary extended process and steps to complete a task 
Consistency and Standards Functionalities of buttons or tabs should remain the same throughout the system. The same 
applies to the interface layout 
Error Prevention It is best to prevent the users from making any errors in the first place. The system may 
eliminate error-prone conditions or confirm user’s choice before committing the action 
Recognition rather than Recall Instructions for use of the system should be visible or easily retrievable whenever appropriate. 
User should not be burdened with having to remember one part of the system to another 
Flexibility and Efficiency of Use System should allow users to fit frequent actions. The system should cater to both experienced 
and inexperienced users 
Aesthetic and Minimalist Design Dialogues should not contain information which is irrelevant or rarely needed. These extra 


information or dialogues may diminish the users’ relative visibility towards the system 
Help Users Recognize, Diagnose _ Error messages to the users must be in plain language which indicates the error clearly. It is also 
and Recover from Errors preferable to make suggestion to address the error 
Help and Documentation Some system may be used without any documentation. However, help and documentation can 
be useful for the users in certain cases and situation if provided 





3.2. Prototype Development - Parents Module 

Figures 2 and 3 show some of the screen grab of the Kantin Online system. Parents are provided 
with different menu options for main course, desserts, drinks and snacks which they can click “Add to Cart” 
when making the selection for their children. Food purchase can only be done on a weekly basis. Once “Add 
to Cart” has been clicked, a prompt will appear providing further details such as allergens, calorie count as 
well as desired day of the week to serve the food to their child. Upon completion, parents can proceed to 
make payment by clicking “Checkout”. Here, an order summary will be displayed, together with payment 
options (credit card, bank transfer, PayPal) as well as billing address. 

The purchased food menu will then be tabulated as a list in “My Order List” module. In this module, 
it will display date of food to be redeemed, food purchased, price and coupon printing button. The latter was 
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included so children could present it to the canteen operator as proof of purchase and to redeem their 
purchased food. The food order list for each child were listed according to the date of food to be redeemed. 


My Meal Counter - Ala Cart Willers Addins “yment Cart 


aes” os 
ass & 











Figure 2. Screen Grab for Menu Module Figure 3. Screen Grab for Order Summary 


3.3. Prototype Development - Canteen Operator’s Module 

The school canteen operator is provided with “Menu Management” module that allows them to 
input menu details such as food image, menu name, price, calories and list of possible allergens as per menu 
approved during the business tendering process with the school management. In the previous section it was 
mentioned that parents can only make purchase a week in advance. Hence, canteen operator can create 
different menu per week allowing more options throughout the month. This helps avoid menu repetition, 
more manageable purchasing of raw materials as well as optimal food preparation. 

Other features made available also include (i) Sales Report - daily sales report which include 
quantity for each food sold, total sales of the day/week/month which will ease the task of the canteen 
operator for its supply chain management as well as its profits and revenue projection, (ii) Student Orders — 
provide a list of menu booked in advance by each student for the week that helps them confirm the menu that 
needs to be prepared in the canteen. 


3.4. Heuristic Evaluation 

We invited two HCI experts to evaluate the Kantin Online System based on Nielsen’s Usability 
Heuristics as shown in Table 1. The evaluation is significant in the identification of design flaws to better 
improve its usability in ensuring that the end product would be useful and usable by the stakeholders. 


3.4.1 Visibility of System Status 
Experts found that that the system has good visibility. Prompts are generated to confirm user’s 
action before committing it allowing users to avoid unnecessary or critical errors. 


3.4.2 Match between System and Real World 

The experts emphasized the need for the system to have logical order and to “speak” users’ 
language. As Kantin Online focused on the purchasing of healthy menu, they have advised for us to revise 
the wordings of the menu tab into “Healthy Main Course” and “Healthy Drinks” as opposed to the original 
“Main Course” and “Drinks”. The experts also found the labelling for “Dessert” tab confusing when the 
menu options there were just fruits. Hence, they have suggested to revise the menu label into “Healthy 
Fruits”. Similar feedback was also given for our “Snacks” menu tab as the menu list were just traditional 
Malaysian soft cakes (i.e. Traditional Kuih). They advised the label to be changed to “Kuih” instead. 
Although the terminology here is in the Malay language, they attested that this is acceptable as the 
stakeholders understood Malay and more importantly, would not confuse users when making their selection. 
Figure 4 illustrates this design problem. 
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Figure 4. Problematic Wordings that could Affect Users’ Understanding of Functionality 


3.4.3. User Control and Freedom 

Our design did not meet this heuristic as experts claimed we did not provide features that allow 
users to easily go to the main page (i.e. Home button) or to undo user’s previous action (i.e. back button). In 
our defense, we prioritized on other heuristics to highlight the system’s main objective (i.e. menu 
management by the canteen operator and menu booking by the parents). Nevertheless, the experts have 
cautioned us to apply this heuristic as we further refine the prototype into a complete system. 


3.4.4 Consistency and Standards 

The experts commended that our system met this heuristic well. This is because the interface layout, 
placement of the buttons and the wordings remained consistent throughout the system. Moreover, the flow of 
the features also follows a logical order reflecting user’s mental model which in turn would provide better 
usability of the system [33] 


3.4.5 Error Prevention 

We did not apply this heuristic into the design. The experts have advised for us to refine the design 
by including input constraints on the input field particularly in input fields which requires numbers. The input 
field should suggest the preferred input type for number fields, the number of digits required as well as 
declining users input should characters inserted are not number type. 


3.4.6 Flexibility and Efficiency of Use 

In our initial design, parents can view their menu selection at the “Order Summary” module. This 
means as parents make their menu choices for upcoming days of the week in the “My Meal Counter” 
module, parents would have to separately browse the “Order Summary” module should they want check their 
previous food order. Following this, the experts suggested that the “Order Summary” page be provided 
adjacent to the “My Manual Counter” page, where it will appear on the left pane of the page upon user 
request. This simple design improvement would make the system more flexible and efficient to use. 


3.4.7 Recognition Rather than Recall 

The experts had commented that this heuristic is further supported by the heuristic of flexibility and 
efficiency of use which had been explained earlier. They have suggested that the selected menu tab should 
always remain visible as to assist users in being aware of which module users are currently at. We did not do 
this in the initial design. 


3.4.8 Aesthetic and Minimalist Design 

The experts did comment on the layout and the use of colours in the prototype. Currently the 
prototype used white background without any decoration, and this may not excite users to use the system. 
Thus, the experts suggested the use of more interesting colours and to make sure that the system does not 
look dull which could bore users over time. Alternative arrangement of the buttons, images and functions 
could also be considered as to make it further exciting to use. 
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3.4.9 Help Users Recognize, Diagnose and Recover from Error 

Error prevention message was not created in this prototype as we focused on the functionality 
process. The experts advised that error messages are very important and should be incorporated into the 
system design. 


3.4.10 Help and Documentation 

We too did not provide this feature as it was intended from the very beginning that system 
evaluation will be done by the experts and not users. We believe that such feature is significant if users 
themselves explore the system and they could refer to it should they face difficulties or errors in using the 
system. Nevertheless, the experts emphasized on the need of this feature as to assist users to better 
use the system. 


4. CONCLUSION 

The purpose of this study was to produce requirement engineering of a system called Kantin Online. 
This system could serve as a medium of engagement amongst parents and canteen operators in managing 
children’s healthy food purchase and preparation. From the preliminary studies conducted with the 
stakeholders, we learned that parents prefer better control on their children’s food intake at school canteen 
while the canteen operators would like to better manage their resources in preparing the food for the children. 
Both stakeholders have their preferred feature which we have determined through the requirements gathering 
process (via interview, questionnaire and observation). 

A middle fidelity prototype was developed with the features that support user needs as well as 
applying Nielsen’s Usability Heuristics into the system design. The prototype was presented to two HCI 
experts which generally finds the system usable and has good usability. However, they attested the need to 
address some of the heuristic principles to ensure that the final system would be better accepted by 
the stakeholders. 

Here therein lies the problem — a presented prototype is sometimes perceived as fully functional and 
experts would evaluate the system design from all perspectives of heuristic principles. Although this presents 
a benefit for designers to uncover design problems, it also presented a problem where experts may lose sight 
on the main intention of the system evaluation — to see if the system design is able to support the main 
functionality. Moreover, as the prototype is at its iteration phase, some heuristic principles can be added later 
after confirming more critical functions. Following this, we would suggest that designers also keep experts at 
tabs by only highlighting the heuristics they have applied in the design as well as casually reminding the 
experts on the objectives of the evaluation. 

Requirements Engineering process have proven to be beneficial in the development of a usable 
system. The user-centered design which consider user needs, sketching design to visualize system concept as 
well constructing a prototype which could be used for evaluation helps confirm that requirements are met. 
However, a usable system can only be achieved if the interface design considers heuristic principles from the 
very beginning. This is because Nielsen’s Usability Heuristics [12] embodies user behavior and expectations 
when interacting with a system. 
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